<script setup lang='ts'>
import { onBeforeMount, onUnmounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onMounted, ref } from 'vue';
const count = ref(0)
onBeforeMount(() => {
  console.log('挂载前')
})
onMounted(() => {
  console.log('挂载后1111')
})
onMounted(() => {
  console.log('挂载后222222222')
})
onMounted(() => {
  console.log('挂载后3333333')
})
onBeforeUpdate(() => {
  console.log('更新前')
})
onUpdated(() => {
  console.log('更新后')
})
onBeforeUnmount(() => {
  console.log('销毁前')
})
onUnmounted(() => {
  console.log('销毁后')
})
const change = () => count.value++

</script>

<template>
  <div>
    <div>{{ count }}</div>
    <button @click="change">更新</button>
  </div>
</template>

<style scoped></style>